<template>
  <div id="Personal">
    <van-nav-bar title="个人信息" left-arrow @click-left="onClickLeft" />
    <div class="PersonalBox">
      <!-- header -->
      <div class="headerBox">
        <input type="file" id="file" hidden accept="image/*" @change="change" />
        <label for="file">
          <van-cell class="Headportrait" title="头像" is-link>
            <van-image
              round
              width="2.5rem"
              height="2.5rem"
              :src="userInfo.avatar"
            />
          </van-cell>
        </label>
      </div>
      <!-- header end -->
      <!-- 名称 -->
      <van-cell
        title="昵称"
        :value="userInfo.nickname"
        is-link
        @click="shownickname = true"
      />
      <!-- 昵称输入弹窗 -->
      <van-dialog v-model="shownickname" width="250px" show-cancel-button>
        <input
          style="
            width: 200px;
            height: 25px;
            margin: 30px 20px;
            border: 1px solid rgb(243, 244, 246);
          "
          type="text"
          v-model="userInfo.nickname"
        />
      </van-dialog>
      <!-- nickname end -->
      <!-- 性别 -->
      <van-cell
        title="性别"
        :value="userInfo.sex"
        is-link
        @click="showMysex = true"
      />
      <!-- 性别选择弹窗 -->
      <van-popup v-model="showMysex" position="bottom">
        <van-picker
          show-toolbar
          title="性别"
          :columns="Sexcolumns"
          @confirm="SexConfirm"
          :default-index="3"
          @cancel="showMysex = false"
        />
      </van-popup>
      <!-- Sex end -->
      <!-- 生日 -->
      <van-cell
        title="生日"
        :value="userInfo.birthday"
        @click="showMyBirthday = true"
        is-link
      />
      <!-- 生日弹窗 -->
      <van-popup v-model="showMyBirthday" position="bottom">
        <van-datetime-picker
          type="date"
          @confirm="BirthdayConfirm"
          @cancel="showMyBirthday = false"
          :value="
            userInfo.birthday
              ? new Date(userInfo.birthday)
              : new Date('2000,01,01')
          "
          title="选择生日"
          :min-date="minDate"
          :max-date="maxDate"
        />
      </van-popup>
      <!-- Birthday end -->
    </div>
    <div class="PYesButtom">
      <van-button type="info" block @click="save">保存</van-button>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { DatetimePicker } from "vant";
import { geteditUserinfo } from "@/api/personal.js";

export default {
  name: "Personal",
  components: {
    [DatetimePicker.name]: DatetimePicker,
  },
  computed:{
    ...mapState(['uid'])
  },
  data() {
    return {
      userInfo: {},
      Sexcolumns: ["男", "女", "外星人", "未知生物"],
      shownickname: false,
      showMysex: false,
      showMyBirthday: false,
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(),
    };
  },
  watch: {
    "$store.state.userInfo": {
      immediate: true, //正常流程
      handler(n, o) {
        this.userInfo = JSON.parse(JSON.stringify(n));
      },
    },
  },
  methods: {
    ...mapActions(["Upload"]),
    // 左侧返回按钮
    onClickLeft() {
      this.$router.replace("/My");
    },
    // 头像上传
    async change(e) {
      let fileList = [...e.target.files].map((v) => {
        return { file: v };
      });
      let [avatar] = await this.Upload(fileList);
      // console.log(avatar)
      // this.userInfo.avatar = avatar;
      this.$set(this.userInfo, "avatar", avatar);
    },
    // 性别弹窗
    SexConfirm(s) {
      this.userInfo.sex = s;
      this.showMysex = false;
    },
    // 生日弹窗
    BirthdayConfirm(b) {
      this.userInfo.birthday = b.toLocaleDateString();
      this.showMyBirthday = false;
    },
    // 点击保存
    save() {
      let { nickname, avatar, _id:uid, birthday, sex } = this.userInfo;
      geteditUserinfo({ nickname, avatar, uid, birthday, sex }).then((res) => {
          // console.log(res)
        if (res.code == 0) {
          this.$store.dispatch('getUserInfo',localStorage.getItem('token'))
          setTimeout((v) => {
            this.$router.replace('/ToLongin')
          }, 0);
          setTimeout((v) => {
            this.$router.replace('/My')
          }, 800);
        } else {
          this.$toast('达咩')
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
#Personal {
  height: 177.8vw;
  background-color: #f7f8fa;
}

::v-deep .van-cell__title span {
  color: #000;
}
.Headportrait {
  height: 60px;
  border-bottom: 1px solid rgb(243, 244, 246);
}
::v-deep .Headportrait[data-v-72b49cef] {
  align-items: center;
}
.PYesButtom {
  margin-top: 40px;
}
::v-deep .van-button--block {
  width: 70%;
  background-color: #8b69a9;
  border: #8b69a9;
}
::v-deep .PYesButtom .van-button {
  margin-left: 55px;
}
</style>